import React, { Component } from 'react';
import styles from './SessionInfo.scss';
import { observable, action, computed } from 'mobx';
import { observer } from 'mobx-react';

import initView from '@/cross/components/View';
const View = initView(styles);
import initText from '@/cross/components/Text';
const Text = initText(styles);
import initImage from '@/cross/components/Image';
const Image = initImage(styles);
import initScrollView from '@/cross/components/ScrollView';
const ScrollView = initScrollView(styles);
import initImageBackground from '@/cross/components/ImageBackground';
const ImageBackground = initImageBackground(styles);

import { Page, HeaderBar, TabItem, Button, Modal, AutoList, ListItem } from '@/cross/components';
import { Switch } from '@/cross/components/Form/FormWidget';

import { CrossPageProps } from '@/cross/pages/PropType';
import { Client } from '@/config';
import { $src, px } from '@/cross/utils';
import { $service, $confirm, $message } from '@/cross/utils';
import { ISession } from '../../types';
import authStore from '@/cross/stores/auth';
import im, { IM } from '@/types/modules/im/client/store/im';
import { Icon } from '@/cross/components/Icon';

interface IProps extends CrossPageProps {
  params: {
    session: ISession;
  };
}

@observer
class PageView extends Component<IProps> {
  componentDidMount() {
    authStore
      .afterLogin(false, { fromPageName: 'Sessions', allwaysWaitLogin: true, needRole: false })
      .then((userInfo) => {})
      .catch(() => {});
    const { session } = this.props.params;
    const { to, avatar, name, isTop } = session;
    if (typeof isTop === 'boolean') this.sessionInfo.isTop = isTop;
    if (avatar) this.sessionInfo.avatar = avatar;
    if (name) this.sessionInfo.nick = name;
    // 判断是否加入免打扰
    if (im.mutelist.findIndex((item) => item.account === to) > -1) {
      this.sessionInfo.isMute = true;
    }
  }

  @observable sessionInfo = {
    avatar: '',
    nick: '',
    isMute: false,
    isTop: false,
  };

  @action handleSwitchChange = (field: string | number | boolean, value?: boolean | number) => {
    console.log('[handleSwitchChange] ', field, value);
    const { session } = this.props.params;
    if (typeof field === 'string') {
      this.sessionInfo = {
        ...this.sessionInfo,
        [field]: value,
      };
      if (field === 'isTop' && session.sessionId) {
        if (value) {
          IM.mim?.addStickTopSession({
            id: session.sessionId,
          });
        } else {
          IM.mim?.deleteStickTopSession({
            id: session.sessionId,
          });
        }
      }
      if (field === 'isMute' && typeof value === 'boolean') {
        im.markInMutelist(this.props.params.session.to || '', value);
      }
    }
  };

  render() {
    const { avatar, nick, isMute, isTop } = this.sessionInfo;
    const { sessionlist } = im;
    console.log('[sessionlist] ', sessionlist);
    return (
      <Page statusBarMode="dark" className="M-b-c-e">
        <HeaderBar title="聊天设置" titleAlign="left" mode="light" />
        <ScrollView>
          <View className="M-flexbox-vertical session-info">
            <View className="M-flexbox-vertical session-info_0">
              <View className="M-flexbox-horizontal session-info_0_0">
                <ImageBackground
                  className="M-flexbox-vertical session-info_0_0_0"
                  src={avatar ? $src(avatar) : require('@/cross/assets/images/default_pic.png')}
                ></ImageBackground>
                <View className="M-flexbox-vertical M-flex-item M-vertical-middle session-info_0_0_1">
                  <View>
                    <Text className="M-f-s-16 M-f-c-333">{nick}</Text>
                  </View>
                </View>
                <View className="M-flexbox-vertical M-vertical-middle">
                  <View className="session-info_0_0_2_0">
                    <Icon name="arrow_right" theme="light" size={24} />
                  </View>
                </View>
              </View>
            </View>
            {/* <View className='M-flexbox-vertical session-info_1'>
              <View className='M-flexbox-horizontal session-info_1_0'>
                <View className='M-flexbox-vertical M-center-all session-info_1_0_0'>
                  <Icon name='add' theme='light' size={30} />
                </View>
                <View className='M-flexbox-vertical M-flex-item M-vertical-middle session-info_1_0_1'>
                  <View>
                    <Text className='M-f-s-16 M-f-c-333'>发起群聊</Text>
                  </View>
                </View>
                <View className='M-flexbox-vertical M-vertical-middle'></View>
              </View>
            </View> */}
            {/* <View className='M-flexbox-horizontal session-info_2 M-m-t-10'>
              <View className='M-flexbox-vertical M-flex-item M-vertical-middle session-info_2_0'>
                <View>
                  <Text className='M-f-s-16 M-f-c-333'>查找聊天记录</Text>
                </View>
              </View>
              <View className='M-flexbox-vertical M-vertical-middle session-info_2_2'>
                <Icon name='arrow_right' theme='light' size={24} />
              </View>
            </View> */}
            <View className="M-flexbox-horizontal session-info_2 M-m-t-10 M-bd-b">
              <View className="M-flexbox-vertical M-flex-item M-vertical-middle session-info_2_0">
                <View>
                  <Text className="M-f-s-16 M-f-c-333">消息免打扰</Text>
                </View>
              </View>
              <View className="M-flexbox-vertical M-vertical-middle session-info_2_2">
                <Switch
                  name="isMute"
                  type="switch"
                  value={isMute}
                  onChange={this.handleSwitchChange}
                />
              </View>
            </View>
            <View className="M-flexbox-horizontal session-info_2 M-bd-b">
              <View className="M-flexbox-vertical M-flex-item M-vertical-middle session-info_2_0">
                <View>
                  <Text className="M-f-s-16 M-f-c-333">置顶聊天</Text>
                </View>
              </View>
              <View className="M-flexbox-vertical M-vertical-middle session-info_2_2">
                <Switch
                  name="isTop"
                  type="switch"
                  value={isTop}
                  onChange={this.handleSwitchChange}
                />
              </View>
            </View>
            {/* <View className='M-flexbox-horizontal session-info_2'>
              <View className='M-flexbox-vertical M-flex-item M-vertical-middle session-info_2_0'>
                <View>
                  <Text className='M-f-s-16 M-f-c-333'>清空聊天记录</Text>
                </View>
              </View>
              <View className='M-flexbox-vertical M-vertical-middle session-info_2_2'>
                <Icon name='arrow_right' theme='light' size={24} />
              </View>
            </View> */}
            <View className="M-flexbox-horizontal session-info_2 M-m-t-10">
              <View className="M-flexbox-vertical M-flex-item M-vertical-middle session-info_2_0">
                <View>
                  <Text className="M-f-s-16 M-f-c-333">投诉</Text>
                </View>
              </View>
              <View className="M-flexbox-vertical M-vertical-middle session-info_2_2">
                <Icon name="arrow_right" theme="light" size={24} />
              </View>
            </View>
          </View>
        </ScrollView>
      </Page>
    );
  }
}

export default PageView;
